<template>
  <div>
    <h3 class="title">基本信息</h3>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c"> 到岗到位人姓名 </el-col>
      <el-col :span="10" :offset="0"> 刘某某 </el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c"> 到岗到位时间 </el-col>
      <el-col :span="10" :offset="0"> 2023-02-16 </el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c"> 签到情况 </el-col>
      <el-col :span="10" :offset="0"> 刘某某 </el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c"> 签到图片 </el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c">
        <el-image
          src="https://file2204.h5project.cn/t8i60yMwTAwHmATBXHDsbHxfGRjrjpJd/react-img.png"
          fit="fill"
          :lazy="true"
        ></el-image>
      </el-col>
    </el-row>
    <el-row class="info">
      <el-col :span="10" :offset="0" class="color-8c"> 定位信息 </el-col>
    </el-row>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <div>
          <span class="color-8c">打卡地点：</span>
          重庆市渝中区解放碑
        </div>
      </template>
      <div id="container"></div>
    </el-card>
    <h3 class="title">督办信息</h3>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row class="info">
        <el-col :span="6" :offset="0" class="color-8c"> 督办意见 </el-col>
        <el-col :span="10" :offset="0"> xxxxxxxx </el-col>
      </el-row>
      <el-row class="info">
        <el-col :span="6" :offset="0" class="color-8c"> 落实人 </el-col>
        <el-col :span="10" :offset="0"> 刘某某 </el-col>
      </el-row>
      <el-row class="info" align="middle">
        <el-col :span="6" :offset="0" class="color-8c"> 照片 </el-col>
        <el-col :span="18" :offset="0">
          <el-avatar
            icon="el-icon-user-solid"
            :size="40"
            shape="square"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            fit="fill"
            class="avatar"
            v-for="item in 3"
          ></el-avatar>
        </el-col>
      </el-row>
      <div class="msg-list">
        <div class="msg" v-for="item in 3">
          <el-row class="msg-row">
            <el-col :span="6" :offset="0" class="color-blue"> 李某某 </el-col>
          </el-row>
          <el-row class="msg-row">
            <el-col :span="6" :offset="0" class="color-8c"> 落实结果 </el-col>
          </el-row>
          <el-row class="msg-row">
            <el-col :span="6" :offset="0" class="color-8c"> 照片 </el-col>
          </el-row>
          <div>
            <el-avatar
              icon="el-icon-user-solid"
              :size="40"
              shape="square"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              fit="fill"
              class="avatar"
              v-for="item in 3"
            ></el-avatar>
          </div>
          <p class="time">回复时间：2023-02-16 12:00</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted } from "vue";
import { shallowRef } from "@vue/reactivity";
export default {
  setup() {
    const map = shallowRef(null);
    const Function = {
      initMap() {
        AMapLoader.load({
          key: "b75430164cdf687c06b040a4ac6ac3d4", // 务必换成自己的key
          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
          .then((AMap) => {
            map = new AMap.Map("container", {
              //设置地图容器id
              viewMode: "3D", //是否为3D地图模式
              zoom: 12, //初始化地图级别
              center: [105.602725, 37.076636], //初始化地图中心点位置
            });
          })
          .catch((e) => {
            console.log(e);
          });
      },
    };
    onMounted(() => {
      Function.initMap();
    });
    return {
      ...Function,
    };
  },
};
</script>

<style lang="scss" scoped>
.title {
  position: relative;
  padding-left: 15px;
  margin: 20px 0;
}
.title::before {
  content: "";
  height: 100%;
  width: 2px;
  background-color: #2997ff;
  position: absolute;
  left: 0;
  top: 0;
}
.info {
  margin: 20px 0;
  font-size: 14px;
}
.color-8c {
  color: #8c8c8c;
}
.color-blue {
  color: #2997ff;
}
#container {
  height: 200px;
}
.avatar {
  margin-right: 10px;
}
.msg {
  border: 1px solid #d8d8d8;
  background-color: #fbfbfb;
  padding: 15px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 20px;
  .msg-row {
    margin: 15px 0;
  }
  .time {
    text-align: right;
    color: #8b8b8b;
    margin-top: 15px;
  }
}
</style>
